<template>
      <div>
            <el-carousel :interval="4000" height="300px" style="width: 80%;position: absolute;left: 10%" type="card">
                  <el-carousel-item v-for="(item) in imgArr" :key="item.id">
                        <el-image :alt="item.target" :src="item.target" style="object-fit: fill;width: 100%;height: 100%"></el-image>
                  </el-carousel-item>
            </el-carousel>

            <div style="position:relative;top:350px;width:45%;left:2.5%;">
                  <el-scrollbar>
                        <el-table :data="lawyerData">
                              <el-table-column label="律师" prop="name"/>
                              <el-table-column label="执业类型" prop="classify">
                                    <template v-slot="scope">
                                          <el-tag
                                                    :type="scope.row.classify=== 0 ? 'primary' : 'success'"
                                                    disable-transitions
                                          >{{ scope.row.classify === 0 ? '民事案件' : '刑事案件' }}
                                          </el-tag
                                          >
                                    </template>
                              </el-table-column>
                              <el-table-column label="证书" prop="credential">
                                    <template v-slot="scope">
                                          <el-tag
                                                    :type="scope.row.credential=== 0 ? 'danger' :(scope.row.crenum=== 1 ? 'success' : 'primary')"
                                                    disable-transitions
                                          >{{ scope.row.credential === 0 ? 'A证' : 'B证' }}
                                          </el-tag
                                          >
                                    </template>
                              </el-table-column>
                        </el-table>
                  </el-scrollbar>

                  <el-pagination v-model:current-page="pageNum"
                                 v-model:page-size="pageSize"
                                 :page-sizes="[2, 5, 10,20]"
                                 :total="total"

                                 layout="total, sizes, prev, pager, next, jumper"
                                 style="position: relative  ;bottom: 10%;left: 4.5%"
                                 @size-change="handleSizeChange"
                                 @current-change="handleCurrentChange"
                  />
            </div>
            <div style="position:absolute;top:440px;width:45%;right:2.5%;">
                  <b style="font-size: 25px;position:absolute;left: 33.5% ;">新 闻 资 讯</b><br><br>
                  <template  v-for="item in pageData" :key="item.id">
                        <el-link style="font-size: 18px" @click="toPage(item.id)">
                              {{ item.title }}
                        </el-link>
                        <el-divider>
                              <el-icon><star-filled /></el-icon>
                        </el-divider>
                        <br>
                  </template>
            </div>

      </div>
</template>

<script>
export default {
      name: "Main",
      data() {
            return {
                  form: {
                        id: '',
                        account: '',
                        title: '',
                        detail: '',
                        flag: ''
                  },
                  pageForm: {
                        id: '',
                        account: '',
                        title: '',
                        detail: '',
                        flag: '',
                  },
                  pageID:0,
                  pageData: [],
                  imgList: [],
                  lawyer: [],
                  lawyerData: [],
                  pageSize: 5,
                  pageNum: 1,
                  total: 0,

                  currentIndex: 0,
                  imgArr: [],
            }
      }
      ,
      created() {
            this.invokeUerList()
            this.loadPost()
            this.loadPage()
            this.loadImg()
      },
      mounted() {
            this.loadPost();
      },
      methods: {
            invokeUerList() {
                  this.$axios.get("/data.json")
                            .then(response => {
                                  console.log(123)
                                  console.log(response)
                                  this.imgList = response.data.success.data;
                            }).catch(function (error) {
                        console.log(error)
                  })
            },
            init() {
                  this.lawyer = JSON.parse(sessionStorage.getItem('CurUser'))
                  this.loadPost()
                  this.loadPage()
                  console.log(JSON.parse(sessionStorage.getItem('CurUser')))
            },
            loadPost() {
                  this.$axios.post('http://localhost:8088/lawyer/listPageResult', {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum

                  }).then(res => res.data).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                              console.log(res.data)
                              this.lawyerData = res.data
                              this.total = res.total
                              console.log(res.total)
                        } else {
                              alert("不是200")
                        }
                  })
            },
            handleSizeChange(val) {
                  console.log(`${val} items per page`)
                  this.pageNum = 1
                  this.pageSize = val
                  this.loadPost()
            },
            handleCurrentChange(val) {
                  console.log(`current page: ${val}`)
                  this.pageNum = val
                  this.loadPost()
            },
            resetParam() {
                  this.name = ''
                  this.sex = ''
            },
            loadPage() {
                  this.$axios.get('http://localhost:8088/page/list').then(res => {
                        console.log("资讯数据===" + res.data)
                        this.pageData = res.data
                  })
            },
            loadImg() {
                  this.$axios.get('http://localhost:8088/img/list').then(res => {
                        console.log("轮播图===" + res.data)
                        this.imgArr = res.data
                  })
            },
            toPage(id){
               console.log("PageID======"+id)
                  this.$axios.post('http://localhost:8088/page/toPageByID?id='+id).then(res => res.data).then(res => {
                        console.log("toPage==="+res.data)
                        sessionStorage.setItem("pageSession", JSON.stringify(res.data))
                        this.$router.push("/pageDetail")
                  })
            },
      }
}
</script>

<style scoped>
.el-carousel__item h3 {
      color: #475669;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
      text-align: center;
}

.el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
      background-color: #d3dce6;
}

.el-link {
      margin-right: 8px;
}

.el-link .el-icon--right.el-icon {
      vertical-align: text-bottom;
}
</style>